<template>
  <view class="list">
    <Item :datalist="datalist" v-if="datalist.length" />
    <Loading :status="loading ? 'loading' : finished ? 'noMore' : ''" v-if="loading || finished" />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Item from '@/components/Item/list2v3.vue'
import Loading from '@/components/Loading'
export default {
  data() {
    return {
      loading: false,
      finished: false,
      datalist: [],
      page: 1
    }
  },
  methods: {
    ...mapActions('list', ['getList']),
    getData(more) {
      if (this.loading && !this.finished) return
      this.loading = true
      this.page = more ? this.page + 1 : 1
      this.getList({
        limit: 12,
        p: this.page
      }).then(res => {
        this.loading = false
        this.datalist = more ? [...this.datalist, ...res.data] : res.data
        if (res.data.length < 12) {
          this.finished = true
        }
      })
    }
  },
  onLoad() {
    this.getData()
  },
  onReachBottom() {
    this.getData(1)
  },
  components: {
    Item,
    Loading
  }
}
</script>

<style></style>
